<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #box {
            position: relative;
            width: 700px;
            height: 394px;
            margin: 150px auto 0;
        }

        #box img {
            width: 700px;
            height: 394px;
            position: absolute;
        }

        #box .bt {
            width: 50px;
            height: 80px;
            background-color: rgba(0, 0, 0, .2);
            color: #fff;
            font-size: 30px;
            line-height: 80px;
            text-align: center;
            position: absolute;
            top: 160px;
            display: none;
        }

        #box .bt:hover {
            cursor: pointer;
            background-color: rgba(0, 0, 0, .5);
        }

        #left {
            left: 0;
        }

        #right {
            right: 0;
        }

        #box #list {
            list-style: none;
            position: absolute;
            bottom: 20px;
            left: 200px;
        }

        #box #list li {
            float: left;
            width: 20px;
            height: 20px;
            background-color: #aaa;
            margin-left: 10px;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
        }

        #box #list li:hover {
            background-color: red;
            color: white;
        }

        #box #list li.active {
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>
<div id="box">
    <img src="images/1.jpg" alt="" id="pic">
    <ul id="list">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <div id="left" class="bt"><</div>
    <div id="right" class="bt">></div>
</div>
<script>
    let jsBox = document.getElementById('box');
    let jsPic = document.getElementById('pic');
    let jsList = document.getElementById('list');
    let jsLisArr = document.getElementsByTagName('li');
    let jsLeft = document.getElementById('left');
    let jsRight = document.getElementById('right');

    //  启动定时器更换jsPic中的属性
    let currentPage = 1;

    //  启动轮播
    function statrLoop() {
        currentPage++;
        changePage();
    }

    //  设置定时器
    let timer = setInterval(statrLoop, 1000);

    //  更换图片和小圆点
    function changePage() {
        if (currentPage === 11) {
            currentPage = 1;
        } else if (currentPage === 0) {
            currentPage = 10;
        }
        jsPic.src = 'images/' + currentPage + '.jpg';
        for (let i = 0; i < jsLisArr.length; i++) {
            jsLisArr[i].className = "";
        }
        jsLisArr[currentPage - 1].className = "active";
    }

    //  鼠标进入jsBox
    jsBox.addEventListener("mouseover", function () {
        //  停止定时器
        clearInterval(timer);
        //  显示左右按钮
        jsLeft.style.display = "block";
        jsRight.style.display = "block";
    }, false);

    //  鼠标离开jsBox
    jsBox.addEventListener("mouseout", function () {
        //  启动定时器
        timer = setInterval(statrLoop, 1000);
        //  隐藏左右按钮
        jsLeft.style.display = "none";
        jsRight.style.display = "none";
    }, false);


    //  点击左右按钮
    jsLeft.addEventListener("click", function () {
        currentPage--;
        changePage();
    }, false);
    jsRight.addEventListener("click", function () {
        currentPage++;
        changePage();
    }, false);


    //  进入小圆点
    for (let i = 0; i < jsLisArr.length; i++) {
        // jsLisArr[i].index = i + 1;
        jsLisArr[i].addEventListener("mouseout", function () {
            // currentPage = (this.index);
            currentPage=i+1;
            changePage();
        }, false);
    }

</script>
</body>
</html>